<template>
    <div class="slide-bg">
        <div  
            id="slide"
            ref="slide"
            :body-style="{padding: 0, height: '100%'}"
            class="slide-detail-card-container" :style="{width: width+'%'}">
            <slot/>
            <div class="close-icon" @click="close">
                <el-icon><Close /></el-icon>
            </div>
            <div class="btn-style">
                <el-button @click="close">{{btnName}}</el-button>
            </div>
        </div>
    </div>


</template>
<script setup lang="ts">
import { defineProps } from 'vue';
    const { proxy, setupState } = getCurrentInstance() as any;
	const props = defineProps({
		'width': {
			'type': Number,
			'required': false,
			'default': 40
		},
        'btnName':{
            'type': String,
			'required': false,
			'default': '关闭'
        }
	
	});
    const emits = defineEmits(['close'])
    const afterEnter = () => {

    }
    const close = () => {
        emits('close')
    }
    const created = () => {
       
    }
	
</script>
<style lang="scss" scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
  will-change: transform;
  transition: all 0.35s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(100%);
}

.slide-detail-card-container {
    background-color: #fff;
    z-index: 1000;
    position: fixed;
    min-width: 426px;
    // width: 40%;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 20px;

}
.btn-style{
    position: absolute;
    bottom: 20px;
    right: 20px;
}
.close-icon{
    position: absolute;
    top: 20px;
    right: 20px;
}
.slide-bg{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    overflow: auto;

}

</style>
